<template>
	<view class="read-desk-container">
		
			<z-paging ref="paging" :auto="false" refresher-only  :fixed="false" @onRefresh="onRefresh" >
				<!-- 自定义导航栏 -->
				<template #top>
					<!-- 顶部导航栏：保留动态高度绑定 -->
					<view class="header" :style="{height: mainNavHeightValue + 'px'}">
						<view class="nav-content">
							<!-- 导航内层容器：保留动态边距和高度绑定 -->
							<view class="nav-inner-wrap"
								:style="{'margin-bottom': -stateHeightValue + 10 + 'px', 'height': navHeightValue + 'px'}">
								<!-- 搜索框外层 -->
								<view class="search-wrap">
									<!-- 搜索框：点击事件保留 -->
									<view class="search-box" @click="enterSearchDetailClick">
										<view class="search-content">
											<!-- 搜索图标容器 -->
											<view class="search-icon-wrap">
												<u-icon name="search" color="#909399" size="20"></u-icon>
											</view>
											<!-- 搜索文字容器 -->
											<view class="search-text-wrap">
												<label class="search-text">{{ $t('home.search') }}</label>
											</view>
										</view>
									</view>
								</view>
								<!-- 性别图标容器：点击事件保留 -->
								<view class="sex-icon-wrap" @click="sexInfoChangeClick">
									<u-icon v-if="sexType == 1" name="man" size="25" color="#ffffff"
										class="sex-icon"></u-icon>
									<u-icon v-if="sexType == 2" name="woman" size="25" color="#ffffff"
										class="sex-icon"></u-icon>
									<u-icon v-if="sexType == 3" name="question-circle" size="25" color="#ffffff"
										class="sex-icon"></u-icon>
								</view>
							</view>
						</view>
					</view>
					
				</template>

				<!-- 人气列表 ：保留动态高度，提取静态样式到class -->
				<!-- argin-top: 10px; -->
				<view style="height: auto;">
					
					<!-- 图片轮播容器 -->
					<view class="swiper-container">
						<uni-swiper-dot style="height: 100%; width: 100%;" @clickItem="clickItem" :info="info"
							:current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
							<swiper style="width: 100%; height: 100%;" @change="change" :current="swiperDotIndex">
								<swiper-item v-for="(item, index) in info" :key="index">
									<view :class="[item.colorClass, 'swiper-item']">
										<image class="swiper-img" :src="item.url" mode="scaleToFill" :draggable="false"
											@click="onBanner(index)" />
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
					
					<!-- 应用项目外层 -->
					<view class="app-items-outer">
						<view class="app-items-inner">
							<!-- 排行榜项：点击事件保留 -->
							<view class="app-item" @click="enterRankListClick">
								<view class="app-icon-wrap">
									<image class="app-icon" src="../../../static/home/listIcon.png"></image>
								</view>
								<view class="app-text-wrap">
									<label class="app-text">{{ $t('home.rankList') }}</label>
								</view>
							</view>
							<!-- VIP项 -->
							<view class="app-item">
								<view class="app-icon-wrap">
									<image class="app-icon" src="../../../static/home/VIPWidthIcon.png"></image>
								</view>
								<view class="app-text-wrap">
									<label class="app-text">{{ $t('home.vip') }}</label>
								</view>
							</view>
							<!-- 分类项：点击事件保留 -->
							<view class="app-item" @click="enterClassificationListClick">
								<view class="app-icon-wrap">
									<image class="app-icon" src="../../../static/home/menuIcon.png"></image>
								</view>
								<view class="app-text-wrap">
									<label class="app-text">{{ $t('home.classification') }}</label>
								</view>
							</view>
						</view>
					</view>
					
					
					<view style="height: 10px;"></view>
					<view v-for="(item,index) in homeRankData" :key="index" class="rank-category-item">

						<view style="height: auto;display: flex;justify-content: center;margin-bottom: 5px;">
							<!-- 分类标题容器 -->
							<view class="rank-category-box">
								<!-- 分类标题文字 -->
								<view class="rank-category-left">
									<label class="rank-category-text">{{item.homeName}}</label>
								</view>
								<!-- 空容器（原结构保留） -->
								<view class="rank-category-right">
									<view></view>
								</view>
							</view>
						</view>

						<view class="book-item" v-for="(item1, index1) in item.detailBeans" :key="index1"
							@click="enterBookInfoDetailClick(index,index1)" :class="{ 'book-item-animated': false }"
							:data-index="index1">


							<!-- 书籍封面 -->
							<view class="book-cover-wrapper">
								<image class="book-cover" :src="item1.bookIconUrl || '/static/default_cover.png'"
									lazy-load mode="aspectFill" @error="onImageError($event, item1)"></image>
							</view>


							<!-- 阅读进度指示器 -->
							<view class="progress-indicator" style="margin-top: 100px;">
								<view class="progress-bar">
									<view class="progress-fill" :style="{ width: (item1.progress || 0) + '%' }"></view>
								</view>
							</view>


							<!-- 书籍信息 -->
							<view class="book-info">
								<!-- 标题 -->
								<h3 class="book-title">{{item1.bookName}}</h3>
								<!-- 元数据信息 -->
								<view class="book-meta">
									<view class="book-author-icon">
										<image class="author-icon-img" lazy-load
											src="../../../static/home/mineIcon.png"></image>
									</view>
									<view>
										<span class="meta-divider">·</span>
										<span class="author">{{item1.author}}</span>
										<span class="meta-divider">·</span>
									</view>
									<!-- 书籍状态标签 -->
									<view class="book-status-wrap">
										<label v-if="item1.status == 2"
											class="book-status ongoing-status">{{ $t('home.ongoing') }}</label>
										<label v-if="item1.status == 1"
											class="book-status completed-status">{{ $t('home.completed') }}</label>
									</view>
								</view>

								<!-- 简介 -->
								<view class="book-description">
									<p class="description-text">{{item1.intro}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		
		
	</view>
</template>

<script>
	import data from "./data.js";
	import methods from "./methods.js";
	import DB from "@/common/sqlite.js";
	import {
		getStorageWidthSex
	} from '@/common/request/storageSyncData.js'
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		// 注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPMixin],
		data() {
			return data.init(this);
		},
		mounted() {
			var that = this;
			that.directionType = "positive"
			setInterval(() => {
				that.pictureRotationAutomatically();
			}, 3000)
			this.getHomeRankingDataList();
		},
		onShow() {},
		onUnmounted() {},
		created() {
			this.sysInfoRes = uni.getSystemInfoSync();
			this.stateHeightValue = this.sysInfoRes.statusBarHeight;
			this.mainNavHeightValue = this.navHeightValue + this.stateHeightValue;
			this.sexType = getStorageWidthSex().id
			let that = this;
			uni.$on('backSexView', function(msg) {
				that.sexType = getStorageWidthSex().id;
				that.getHomeRankingDataList();
			});
		},
		methods: {
			...methods,
			// 刷新回调 - 优化性能
			onRefresh() {
				let that = this;
				that.getHomeRankingDataList();
			},
		}
	};
</script>

<style lang="scss" scoped>
	// 1. 全局样式变量（保留有用变量，补充新增样式所需变量）
	$primary-color: #d4237a;
	$secondary-color: #5AC8FA;
	$text-primary: #333;
	$text-secondary: #666;
	$text-tertiary: #8a8a8a;
	$bg-primary: #ffffff;
	$bg-secondary: #f8f9fa;
	$bg-category: #F0F0F0;
	$color-ongoing-bg: #FAB6B6;
	$color-ongoing-text: #ffffff;
	$color-completed-bg: #ecf5ff;
	$color-completed-text: #2979ff;
	$spacing-lg: 16px;
	$border-color: #e4e7ed;
	$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
	$shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
	$border-radius: 12px;
	$spacing-xs: 4px;
	$spacing-sm: 8px;
	$spacing-md: 12px;
	$spacing-lg: 16px;
	$spacing-xl: 20px;
	$skeleton-bg: #f0f0f0;
	$skeleton-shine: rgba(255, 255, 255, 0.6);

	// 2. 根容器样式
	.read-desk-container {
		width: 100%;
		height: 100%;
		background-color: $bg-secondary;
		position: relative;
		overflow: hidden;
	}

	// 3. 外层容器
	.app-outer-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	// 4. 顶部导航栏样式（原有用样式保留，无冗余）
	.header {
		width: 100%;
		z-index: 1000;
		background: linear-gradient(135deg, $primary-color, $secondary-color);
		overflow: hidden;
		display: flex;
		align-items: center;
		// 移除状态栏占位，直接使用固定高度
		padding-top: 0;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		max-width: 100%;
	}

	.nav-inner-wrap {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 5. 搜索相关样式
	.search-wrap {
		width: calc(100% - 60px);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.search-box {
		width: 95%;
		height: 35px;
		background-color: rgb(242, 242, 242);
		border-radius: 18px;
		margin-left: 5%;
	}

	.search-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		justify-content: center;
	}

	.search-icon-wrap {
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-text-wrap {
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 5px;
	}

	.search-text {
		color: #909399;
		font-size: 14px;
		padding: 0;
	}

	// 6. 性别图标相关样式
	.sex-icon-wrap {
		width: 60px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.sex-icon {
		margin-right: 15px;
	}

	// 7. 中间内容区基础样式
	.content-outer {
		height: 100%;
		width: 100%;
	}

	.content-scroll-wrap {
		height: calc(100% - env(safe-area-inset-bottom) - 60px);
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	// 8. 轮播相关样式
	.swiper-container {
		height: 130px;
		width: 100%;
		height: 400rpx;
		background-color: #F1F1F1;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swiper-img {
		width: 100vw;
	}

	// 9. 应用项目相关样式
	.app-items-outer {
		width: 100%;
		background-color: $bg-primary;
		height: 90px;
		display: flex;
		align-items: center;
	}

	.app-items-inner {
		width: calc(100% - 60px);
		height: 100%;
		margin-left: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.app-item {
		height: 60px;
		width: 52px;
		display: flex;
		flex-direction: column;
	}

	.app-icon-wrap {
		width: 42px;
		height: 42px;
	}

	.app-icon {
		width: 100%;
		height: 100%;
	}

	.app-text-wrap {
		width: 52px;
		height: 17px;
		margin-top: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.app-text {
		font-size: 10px;
		color: #a3a3a3;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	.rank-category-item {
		display: flex;
		flex-direction: column;
	}

	.rank-category-list-item {
		padding: 0;
	}

	.slot-box {
		width: 100%;
	}

	// 分类标题容器
	.rank-category-box {
		height: 40px;
		width: calc(100vw - 30px);
		display: flex;
		flex-direction: row;
		background-color: $bg-category;
		border-radius: 8px;
	}

	// 分类标题左侧文字
	.rank-category-left {
		width: 50%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.rank-category-text {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #303133;
	}

	// 分类标题右侧空容器
	.rank-category-right {
		width: 50%;
		height: 100%;
	}

	.rank-category-right view {
		width: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		padding: 0;
	}

	// 书籍列表项基础样式
	.book-list-item {
		padding: 0;
	}

	// 书籍项外层
	.book-item-outer {
		height: 95px;
		width: 100vw;
	}

	// 书籍项内容wrap
	.book-item-wrap {
		position: absolute;
		top: 10px;
		margin-left: 0px;
		width: calc(100% - 30px);
		height: calc(100% - 10px);
		display: flex;
		flex-direction: row;
	}

	// 书籍封面容器
	.book-cover-wrap {
		width: 85px;
		height: 100%;
	}

	// 书籍封面图片
	.book-cover-img {
		width: 75px;
		height: 100px;
		border-radius: 3px;
	}

	// 书籍信息wrap
	.book-info-wrap {
		width: calc(100% - 85px);
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	// 书名容器
	.book-title-wrap {
		width: 100%;
		height: 33px;
	}

	// 书名文字
	.book-title-text {
		height: 23px;
		line-height: 23px;
		font-size: 16px;
		color: $text-primary;
	}

	// 书籍简介容器
	.book-intro-wrap {
		width: 100%;
		height: calc(100% - 101px);
	}

	// 书籍简介文字（多行省略）
	.book-intro-text {
		line-height: 18px;
		font-size: 14px;
		color: $text-tertiary;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	// 书籍元信息wrap（作者+状态）
	.book-meta-wrap {
		width: 100%;
		height: 28px;
		margin-top: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	// 作者信息wrap
	.book-author-wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	// 作者图标容器
	.book-author-icon {
		width: 12px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 作者图标图片
	.author-icon-img {
		width: 15px;
		height: 12px;
	}

	// 作者文字容器
	.book-author-text {
		width: 55px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 作者文字（单行省略）
	.author-text {
		display: inline-block;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 12px;
		font-size: 12px;
		max-width: 90%;
		color: $text-tertiary;
	}

	// 书籍状态wrap
	.book-status-wrap {
		display: flex;
		align-items: center;
		margin-left: 0px;
	}

	// 书籍状态基础样式
	.book-status {
		height: 20px;
		font-size: 10px;
		border-radius: 50px;
		// padding-left: 10px;
		// padding-right: 10px;
		line-height: 20px;
		margin-right: 5px;
	}

	// 连载中状态
	.ongoing-status {
		color: $primary-color;
		font-size: 12px;
	}

	// 已完成状态
	.completed-status {
		color: $color-completed-text;
		font-size: 12px;
	}


	// 优化的书籍列表项样式
	.book-item {
		display: flex;
		align-items: flex-start;
		margin: 5px $spacing-lg;
		padding: $spacing-lg;
		background: $bg-primary;
		border-radius: $border-radius;
		box-shadow: $shadow-light;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
		// 增强深度感
		transform: translateY(0);
		z-index: 1;

		// 简化装饰元素
		&::before {
			content: '';
			position: absolute;
			bottom: -30px;
			right: -30px;
			width: 100px;
			height: 100px;
			background: linear-gradient(135deg, rgba(0, 122, 255, 0.05), transparent);
			border-radius: 50%;
		}
	}

	// 添加动画效果
	.book-item-animated {
		animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	}

	@keyframes slideInUp {
		from {
			transform: translateY(20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	// 为不同的列表项添加延迟动画
	.book-item[data-index="0"] {
		animation-delay: 0.1s;
	}

	.book-item[data-index="1"] {
		animation-delay: 0.2s;
	}

	.book-item[data-index="2"] {
		animation-delay: 0.3s;
	}

	.book-item[data-index="3"] {
		animation-delay: 0.4s;
	}

	.book-item[data-index="4"] {
		animation-delay: 0.5s;
	}

	.book-item[data-index="5"] {
		animation-delay: 0.6s;
	}

	.book-item[data-index="6"] {
		animation-delay: 0.7s;
	}

	.book-item[data-index="7"] {
		animation-delay: 0.8s;
	}

	.book-item[data-index="8"] {
		animation-delay: 0.9s;
	}

	.book-item[data-index="9"] {
		animation-delay: 1s;
	}

	// 点击效果
	.book-item:active {
		transform: scale(0.98);
		box-shadow: $shadow-medium;
		background: linear-gradient(135deg, $bg-primary, #f0f2f5);
	}


	// 书籍封面
	.book-cover-wrapper {
		position: relative;
		width: 80px;
		height: 112px;
		flex-shrink: 0;
	}

	// 书籍封面 - 优化3D效果
	.book-cover {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		// 添加3D效果
		transform-style: preserve-3d;
		transform: rotateY(5deg) translateZ(5px);
		transition: all 0.3s ease;

		// 添加书脊效果
		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: -8px;
			width: 8px;
			height: 100%;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05));
			transform: rotateY(90deg);
			transform-origin: left center;
		}

		// 添加悬浮动画效果
		animation: cover-float 6s ease-in-out infinite;
	}


	// 阅读进度指示器
	.progress-indicator {
		position: absolute;
		bottom: 8px;
		left: 8px;
		right: 8px;
		height: 3px;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
		overflow: hidden;
		display: flex;
		align-items: center;
	}


	// 阅读进度条 - 增强视觉效果
	.progress-bar {
		width: 100%;
		height: 100%;
		// 添加进度条背景纹理
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 50%, transparent 50%);
		background-size: 8px 8px;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.progress-fill {
		height: 100%;
		background: linear-gradient(90deg, $primary-color, $secondary-color);
		border-radius: 3px;
		// 添加进度条动画
		animation: progressGrow 0s ease-out;
	}

	@keyframes progressGrow {
		from {
			width: 0;
		}

		to {
			width: inherit;
		}
	}

	// 书籍信息 - 再次优化布局和协调性
	.book-info {
		flex: 1;
		margin-left: $spacing-lg;
		display: flex;
		flex-direction: column;
		// 为内容提供足够空间，避免拥挤
		min-height: 112px;
		justify-content: space-between;
		// 添加卡片内边距感
		padding: 2px;
	}

	// 分类标签 - 与标题分行显示
	.book-category {
		font-size: 12px;
		color: $text-tertiary;
		background: $bg-secondary;
		border-radius: 12px;
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 3px;
		padding-bottom: 3px;
		// 添加细微的边框
		border: 1px solid rgba(0, 0, 0, 0.03);
		// 添加动画
		transition: all 0.3s ease;
		margin-left: 20px;
	}

	// 调整标题样式
	.book-title {
		font-size: 17px;
		font-weight: bold;
		color: $text-primary;
		margin: 0 0 $spacing-xs 0;
		// 防止标题过长
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		// 添加标题效果
		position: relative;
		z-index: 1;
		// 优化标题排版
		letter-spacing: 0.5px;
	}

	.book-item:hover .book-category {
		background: rgba(0, 122, 255, 0.05);
		color: $primary-color;
	}

	// 元数据信息
	.book-meta {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-sm;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		// justify-content: space-between;
	}

	.author {
		font-size: 13px;
		color: $text-secondary;
		// 添加微妙的悬浮效果
		transition: color 0.3s ease;
	}

	//  .author

	.book-item:hover {
		color: $primary-color;
	}

	.meta-divider {
		font-size: 12px;
		color: $text-tertiary;
		margin: 0 4px;
	}

	.read-time-info {
		font-size: 12px;
		color: $primary-color;
		font-weight: 500;
		// 添加数字动画效果
		display: inline-block;
	}

	/* 最近阅读时间 */
	.last-read-info {
		display: flex;
		align-items: center;
		margin-bottom: $spacing-xs;
		padding: 2px 0;
	}

	.clock-icon {
		margin-right: 4px;
	}

	.last-read-text {
		font-size: 11px;
		color: $text-tertiary;
	}

	// 简介 - 优化显示，避免拥挤
	.book-description {
		flex: 1;
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	.description-text {
		font-size: 13px;
		color: $text-tertiary;
		line-height: 1.6;
		margin: 0;
		display: -webkit-box;
		// 限制显示两行，避免占用过多空间
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		// 优化文字排版
		letter-spacing: 0.3px;
		word-spacing: 1px;
	}

	// 阅读状态 - 优化样式
	.read-status {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: $spacing-sm;
		padding-top: $spacing-sm;
		// 美化分割线
		border-top: 1px solid rgba(0, 0, 0, 0.03);
	}
</style>